/* CSS Document */

.treasure {text-align:center;padding-top:10rem;width:100%;overflow-x:hidden;padding-bottom:1rem;}
.treasureItem {display:inline-block;position:relative;width:45%;min-height:14rem;}
.treasureItem img {display:none;position:absolute;z-index:2;width:100%;left:0;bottom:0;}
.treasureItem .on {display:block;}
.treasureItem:after {content:"";position:absolute;z-index:0;left:4%;bottom:10%;width:89%;height:64%;border-radius:3rem 3rem .2rem .2rem;animation:flammule 1s infinite alternate;background:#fff; -webkit-filter: blur(1rem); /* Chrome, Opera */
       -moz-filter: blur(1rem);
        -ms-filter: blur(1rem);   
            filter: blur(1rem);}
.treasureItem .flash {position:absolute;z-index:2;left:4%;bottom:50%;display:block;width:85%;height:16%;background:rgba(255,255,0,.6);box-shadow:0 0 10rem #FF0,0 0 10rem #FF0,0 0 10rem #FF0;border-radius:100rem 100rem 0 0;opacity:0;}
.treasureItem .flash.on {animation:flash 1s;}
.treasureItem .flash:after {content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:0;background:url(flash.svg) no-repeat 0 0 / 100%;}
.treasureItem .star01,
.treasureItem .star02,
.treasureItem .star03,
.treasureItem .star04 {position:absolute;z-index:2;display:none;}
.treasureItem .star01 {left:23%;top:27%;width:20%;height:20%;background:url(star01.svg) no-repeat 0 0 / 100%;}
.treasureItem .star02 {left:70%;top:25%;width:18%;height:18%;background:url(star02.svg) no-repeat 0 0 / 100%;}
.treasureItem .star03 {left:30%;top:40%;width:18%;height:18%;background:url(star01.svg) no-repeat 0 0 / 100%;}
.treasureItem .star04 {left:60%;top:35%;width:16%;height:16%;background:url(star02.svg) no-repeat 0 0 / 100%;}
.treasureItem .star01.on {display:block;animation:star 1.5s infinite alternate;opacity:0;}
.treasureItem .star02.on {display:block;animation:star 2.1s infinite alternate;opacity:0;}
.treasureItem .star03.on {display:block;animation:star 2.4s infinite alternate;opacity:0;}
.treasureItem .star04.on {display:block;animation:star 1.8s infinite alternate;opacity:0;}
.treasureItem .ribbon01,
.treasureItem .ribbon02,
.treasureItem .ribbon03,
.treasureItem .ribbon04 {display:none;width:2rem;height:8rem;position:absolute;}
.treasureItem .ribbon01 {background:url(ribbon01.svg) no-repeat 0 0 / 100%;z-index:2;}
.treasureItem .ribbon02 {background:url(ribbon02.svg) no-repeat 0 0 / 100%;z-index:0;}
.treasureItem .ribbon03 {background:url(ribbon03.svg) no-repeat 0 0 / 100%;z-index:2;}
.treasureItem .ribbon04 {background:url(ribbon04.svg) no-repeat 0 0 / 100%;z-index:0;}
.treasureItem .coin01,
.treasureItem .coin02,
.treasureItem .coin03,
.treasureItem .coin04,
.treasureItem .coin05,
.treasureItem .coin06 {display:none;width:1.75rem;height:1.531rem;position:absolute;background:url(coin.svg) no-repeat 0 0 / 100%;z-index:2;}

.treasureItem .ribbon01.on,
.treasureItem .ribbon02.on,
.treasureItem .ribbon03.on,
.treasureItem .ribbon04.on {display:block;}
.treasureItem .ribbon01.on {animation:ribbon01 1s;right:-4rem;bottom:1rem;transform:rotateZ(60deg);}
.treasureItem .ribbon02.on {animation:ribbon02 1s;right:-2rem;bottom:6rem;transform:rotateZ(30deg);}
.treasureItem .ribbon03.on {animation:ribbon03 1s;left:-4rem;bottom:1rem;transform:rotateZ(-60deg);}
.treasureItem .ribbon04.on {animation:ribbon04 1s;left:-2rem;bottom:6rem;transform:rotateZ(-30deg);}

.treasureItem .coin01.on,
.treasureItem .coin02.on,
.treasureItem .coin03.on,
.treasureItem .coin04.on,
.treasureItem .coin05.on,
.treasureItem .coin06.on {display:block;}
.treasureItem .coin01.on {animation:coin01 1s;left:-6rem;bottom:14rem;transform:rotateZ(0deg);;}
.treasureItem .coin02.on {animation:coin02 1s;left:-1rem;bottom:9rem;transform:rotateZ(-10deg);}
.treasureItem .coin03.on {animation:coin03 1s;left:-2.5rem;bottom:0rem;transform:rotateZ(360deg);}
.treasureItem .coin04.on {animation:coin04 1s;left:-5rem;bottom:8rem;transform:rotateZ(10deg);}
.treasureItem .coin05.on {animation:coin05 1s;right:-6rem;bottom:12rem;transform:rotateZ(100deg);}
.treasureItem .coin06.on {animation:coin06 1s;right:-5.2rem;bottom:7.5rem;transform:rotateZ(530deg);}

@-webkit-keyframes flammule 
{
	0%   {box-shadow:0 0 5rem #ff0,0 0 5rem #ff0;}
	100% {box-shadow:0 0 5rem #ff0,0 0 5rem #ff0,0 0 5rem #ff0,0 0 1rem #fff,0 0 1rem #fff;}
}
@-webkit-keyframes flash 
{
	0%   {opacity:0;}
	20%   {opacity:1;}
	100% {opacity:0;}
}
@-webkit-keyframes ribbon01 
{
	0%   {right:4rem;bottom:0rem;transform:rotateZ(30deg);opacity:0;}
	30%  {right:-3rem;bottom:.8rem;transform:rotateZ(57deg);opacity:.8;}
	100% {right:-4rem;bottom:1rem;transform:rotateZ(60deg);opacity:1;}
}
@-webkit-keyframes ribbon02 
{
	0%   {right:4rem;bottom:0rem;transform:rotateZ(0deg);opacity:0;}
	30%  {right:-1rem;bottom:5rem;transform:rotateZ(27deg);opacity:.8;}
	100% {right:-2rem;bottom:6rem;transform:rotateZ(30deg);opacity:1;}
}
@-webkit-keyframes ribbon03 
{
	0%   {left:4rem;bottom:0rem;transform:rotateZ(-30deg);opacity:0;}
	30%  {left:-3rem;bottom:.8rem;transform:rotateZ(-57deg);opacity:.8;}
	100% {left:-4rem;bottom:1rem;transform:rotateZ(-60deg);opacity:1;}
}
@-webkit-keyframes ribbon04 
{
	0%   {left:4rem;bottom:0rem;transform:rotateZ(0deg);opacity:0;}
	30%  {left:-1rem;bottom:5rem;transform:rotateZ(-27deg);opacity:.8;}
	100% {left:-2rem;bottom:6rem;transform:rotateZ(-30deg);opacity:1;}
}
@-webkit-keyframes coin01 
{
	0%   {left:4rem;bottom:7rem;transform:rotateZ(-1930deg);opacity:0;}
	100% {left:-6rem;bottom:14rem;transform:rotateZ(0deg);opacity:1;}
}
@-webkit-keyframes coin02 
{
	0%   {left:4rem;bottom:7rem;transform:rotateZ(190deg);opacity:0;}
	100% {left:-1rem;bottom:9rem;transform:rotateZ(-10deg);opacity:1;}
}
@-webkit-keyframes coin03 
{
	0%   {left:6rem;bottom:6rem;transform:rotateZ(-90deg);opacity:0;}
	30%  {left:2rem;bottom:8rem;transform:rotateZ(120deg);opacity:.3;}
	80%  {left:-2rem;bottom:0rem;transform:rotateZ(600deg);opacity:.6;}
	95%  {left:-2.2rem;bottom:1rem;transform:rotateZ(300deg);opacity:.8;}
	100% {left:-2.5rem;bottom:0rem;transform:rotateZ(360deg);opacity:1;}
}
@-webkit-keyframes coin04 
{
	0%   {left:4rem;bottom:7rem;transform:rotateZ(870deg);opacity:0;}
	50%  {transform:rotateZ(80deg);}
	100% {left:-5rem;bottom:8rem;transform:rotateZ(10deg);opacity:1;}
}
@-webkit-keyframes coin05
{
	0%   {right:4rem;bottom:7rem;transform:rotateZ(-930deg);opacity:0;}
	30%  {right:-5rem;bottom:11rem;transform:rotateZ(-100deg);opacity:.8;}
	100% {right:-6rem;bottom:12rem;transform:rotateZ(100deg);opacity:1;}
}
@-webkit-keyframes coin06
{
	0%   {right:4rem;bottom:6rem;transform:rotateZ(-70deg);opacity:0;}
	50%  {transform:rotateZ(300deg);}
	90% {right:-5rem;bottom:7.5rem;transform:rotateZ(500deg);opacity:1;}
	100% {right:-5.2rem;transform:rotateZ(530deg);}
}
@-webkit-keyframes star
{
	0%   {opacity:0;}
	90%  {opacity:.01;}
	100% {opacity:1;}
}

.prize {position:fixed;z-index:100;width:100%;height:100%;left:-1000rem;top:0;background:rgba(0,0,0,.8);}
.prize .prizeIn {margin:2rem;}
.prize .title {font-size:0;}
.prize .title img {width:100%;border:0;}
.prize .envelope {margin-top:-.2rem;padding:1rem;padding-top:0;background:#df3120;border-radius:0 0 1.5rem 1.5rem;}
.prize .explain {margin-bottom:1rem;color:#fde734;text-align:center;}
.prize .button_block {background:#fde734;color:#444449;}
.prize h2 {text-align:center;color:#fff;}
.prize .cancel {display:block;width:3rem;height:3rem;background:url(cancel_white.svg) no-repeat 0 0 / 100%;position:absolute;left:0;right:0;bottom:2rem;margin:auto;text-indent:1000rem;overflow:hidden;color:rgba(0,0,0,0);font-size:0;}

/*iP5*/
@media screen and (min-width:0) and (max-width:320px) {
.treasure {padding-top:6rem;}
.treasureItem:after {left:4%;bottom:7%;width:89%;height:49%;border-radius:2rem 2rem .2rem .2rem;}
.treasureItem .flash {bottom:35%;}
.treasureItem .star01 {left:23%;top:43%;}
.treasureItem .star02 {left:70%;top:43%;}
.treasureItem .star03 {left:30%;top:50%;}
.treasureItem .star04 {left:60%;top:48%;}
}
/*iP6*/
@media screen and (min-width:321px) and (max-width:375px) {
.treasureItem:after {left:4%;bottom:8%;width:89%;height:59%;}
.treasureItem .flash {bottom:44%;}
.treasureItem .star01 {left:23%;top:34%;}
.treasureItem .star02 {left:70%;top:34%;}
.treasureItem .star03 {left:30%;top:41%;}
.treasureItem .star04 {left:60%;top:39%;}
}
/*6P*/
@media screen and (min-width:376px) and (max-width:414px) {
.treasure {padding-top:12rem;}
.treasureItem:after {left:4%;bottom:10%;width:89%;height:64%;}
}